<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">店铺消费</block>
		</cu-custom>
		<view class="ticket-content">
			<view class="tab-view">
				<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
				 :data-current="index" @tap.stop="swichNav">{{item}}</view>
			</view>
			<swiper class="tab-content" :current="currentTab" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
				<swiper-item>
					<scroll-view scroll-y class="scoll-y" :lower-threshold="'200'" @scrolltolower="getOffline" :style="{paddingTop: 88+'rpx'}">
						<view class="time-filter">
							<view class="tit">
								当日资金明细
							</view>
							<view class="right">
								<view class="picker-time">
									<picker mode="date" :value="dateOffline" start="2018-01-01" end="2999-12-31" @change="bindDateChangeOff">
										<view class="picker text-colorP">
											{{dateOffline?dateOffline:'请选择时间'}}
										</view>
									</picker>
								</view>
								<text class="lg text-gray " :class="'cuIcon-right'"></text>
							</view>
						</view>
						<view class="z_w"></view>
						<view class="slide-view" :style="{height: desInfo?'530rpx':'88rpx'}">
							<view class="info-item" v-if="desInfo">
								<text>总营收金额({{offInfo.count_number?offInfo.count_number:'0'}})</text>
								<text class="text-price">{{offInfo.count_amout?offInfo.count_amout:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfo">
								<text>总实收金额</text>
								<text class="text-price">{{offInfo.count_receivable?offInfo.count_receivable:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfo">
								<text>奖金发放池</text>
								<text class="text-price">{{poolMoney}}</text>
							</view>
							<view class="info-item" v-if="desInfo">
								<text>当日营收金额</text>
								<text class="text-price">{{offInfo.salesAmount?offInfo.salesAmount:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfo">
								<text>当日实收金额</text>
								<text class="text-price">{{offInfo.receivable?offInfo.receivable:'0.00'}}</text>
							</view>
							<view class="use-btn" @click="useOff">
								<text>{{desInfo?'收起':'查看详情'}}</text>
								<text class="lg text-gray down" :class="'cuIcon-right'" v-if="!desInfo"></text>
								<text class="lg text-gray up" :class="'cuIcon-right'" v-if="desInfo"></text>
							</view>
						</view>
						<view class='activity-item  shadow shadow-grey' v-for="(item,index) in offList" :key="index">
							<image :src="item.headimg"></image>
							<view class="content">
								<view class="bus_name">{{item.user_name}}</view>
								<view class="bus_time">{{item.add_time}}</view>
							</view>
							<view class="text-price text-colorP right">
								{{item.order_amount}}
							</view>
						</view>
						<no-content :showType="'data'" v-if="noContentDataOff" :tips="'暂无门店订单，切换时间试试~'"></no-content>
						<tui-divider width="60%" :gradual="true" v-if="offNoMore">没有更多了~</tui-divider>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y class="scoll-y" :lower-threshold="'200'" @scrolltolower="getOnline" :style="{paddingTop: 88+'rpx'}">
						<view class="time-filter">
							<view class="tit">
								当日资金明细
							</view>
							<view class="right">
								<view class="picker-time">
									<picker mode="date" :value="dateOnline" start="2018-01-01" end="2999-12-31" @change="bindDateChangeOn">
										<view class="picker text-colorP">
											{{dateOnline?dateOnline:'请选择时间'}}
										</view>
									</picker>
								</view>
								<text class="lg text-gray" :class="'cuIcon-right'"></text>
							</view>
						</view>
						<view class="z_w"></view>
						<view class="slide-view" :style="{height: desInfoOn?'530rpx':'88rpx'}">
							<view class="info-item" v-if="desInfoOn">
								<text>总营收金额({{onInfo.count_number?onInfo.count_number:'0'}})</text>
								<text class="text-price">{{onInfo.count_amout?onInfo.count_amout:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfoOn">
								<text>总实收金额</text>
								<text class="text-price">{{onInfo.count_receivable?onInfo.count_receivable:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfoOn">
								<text>奖金发放池</text>
								<text class="text-price">{{poolMoney}}</text>
							</view>
							<view class="info-item" v-if="desInfoOn">
								<text>当日营收金额</text>
								<text class="text-price">{{onInfo.salesAmount?onInfo.salesAmount:'0.00'}}</text>
							</view>
							<view class="info-item" v-if="desInfoOn">
								<text>当日实收金额</text>
								<text class="text-price">{{onInfo.receivable?onInfo.receivable:'0.00'}}</text>
							</view>
							<view class="use-btn" @click="useOn">
								<text>{{desInfoOn?'收起':'查看详情'}}</text>
								<text class="lg text-gray down" :class="'cuIcon-right'" v-if="!desInfoOn"></text>
								<text class="lg text-gray up" :class="'cuIcon-right'" v-if="desInfoOn"></text>
							</view>
						</view>
						<view class='activity-item  shadow shadow-grey' v-for="(item,index) in onList" :key="index">
							<image :src="item.headimg"></image>
							<view class="content">
								<view class="bus_name">{{item.real_name}}</view>
								<view class="bus_time">{{item.create_time}}</view>
							</view>
							<view class="text-price text-colorP right">
								{{item.pay_price}}
							</view>
						</view>
						<view class='activity-item shadow shadow-grey' v-for="(item,index) in onList" :key="index">
							<image :src="item.headimg"></image>
							<view class="content">
								<view class="bus_name">{{item.user_name}}</view>
								<view class="bus_time">{{item.create_time}}</view>
							</view>
							<view class="text-price text-colorP right">
								{{item.money}}
							</view>
						</view>
						<no-content :showType="'orders'" v-if="noContentDataOn" :tips="'暂无商城订单，切换时间试试~'"></no-content>
						<tui-divider width="60%" :gradual="true" v-if="onNoMore">没有更多了~</tui-divider>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				winHeight: 0,
				tabbar: ["门店订单", "商城订单"],
				currentTab: 0, //预设当前项的值
				offPage: 1,
				onPage: 1,
				offList: [],
				onList: [],
				offNoMore: false,
				onNoMore: false,
				onflag: true,
				offflag: true,
				dateOnline: '',
				dateOffline: '',
				noContentDataOn: false,
				noContentDataOff: false,
				desInfo: false,
				desInfoOn: false,
				poolMoney: 0,
				// 线下信息
				offInfo: {},
				// 线上信息
				onInfo: {}
			}
		},
		methods: {
			useOn() {
				this.desInfoOn = !this.desInfoOn
			},
			useOff() {
				this.desInfo = !this.desInfo
			},
			bindDateChangeOff(e) {
				this.dateOffline = e.detail.value
				this.offList = []
				this.offPage = 1
				this.getOffline()
			},
			bindDateChangeOn(e) {
				this.dateOnline = e.detail.value
				this.onList = []
				this.onPage = 1
				this.getOnline()
			},
			getOffline() {
				var that = this;
				that.noContentDataOff = false
				if (that.offNoMore) return
				if (!that.offflag) return
				that.offflag = false
				this.$request({
					url: '/Shop/todaySalesDetailNew',
					data: {
						page: that.offPage,
						day: that.dateOffline
					},
					success: res => {
						if (res.data.status == 1) {
							var offList = that.offList
							// 没有数据时显示暂无数据
							that.offInfo = res.data.data
							if (res.data.data.data.length == 0 && that.offPage == 1) {
								that.noContentDataOff = true
								that.offflag = true
								return
							}
							res.data.data.data.forEach(item => {
								item.money = Number(item.money).toFixed(2)
								offList.push(item)
							})
							that.offPage += 1
							if (that.offPage > res.data.data.pageCount) {
								that.offNoMore = true
							}
							that.offList = offList
							that.offflag = true
							uni.hideLoading()
						} else {
							that.offflag = true
						}
					},
					fail: () => {
						that.offflag = true
					},
					complete: () => {}
				});
			},
			getOnline() {
				var that = this;
				that.noContentDataOn = false
				if (that.onNoMore) return
				if (!that.onflag) return
				that.onflag = false
				this.$request({
					url: '/Shop/todaySalesDetailOnlineNew',
					data: {
						page: that.onPage,
						day: that.dateOnline,
					},
					success: res => {
						if (res.data.status == 1) {
							// 没有数据时显示暂无数据
							that.onInfo = res.data.data
							if (res.data.data.data.length == 0 && that.onPage == 1) {
								that.noContentDataOn = true
								that.onflag = true
								return
							}
							var onList = that.onList
							res.data.data.data.forEach(item => {
								item.money = Number(item.money).toFixed(2)
								onList.push(item)
							})
							that.onPage += 1
							if (that.onPage > res.data.data.pageCount) {
								that.onNoMore = true
							}
							that.onList = onList
							that.onflag = true
							uni.hideLoading()
						} else {
							that.onflag = true
						}
					},
					fail: () => {
						that.onflag = true
					},
					complete: () => {}
				});
			},
			// 滚动切换标签样式
			switchTab: function(e) {
				let that = this;
				this.currentTab = e.detail.current;
				this.checkCor();
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 3) {
					//这里距离按实际计算
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			getPoolMoney() {
				var that = this;
				this.$request({
					url: '/Shop/getBusinessPoolMoney',
					success: res => {
						if (res.data.status == 1) {
							that.poolMoney = Number(res.data.data).toFixed(2)
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
		onLoad() {
			const that = this;
			that.getOffline()
			that.getOnline()
			this.getPoolMoney()
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						let winHeight = res.windowHeight - that.CustomBar - 44;
						that.winHeight = winHeight;
					}
				})
			}, 10)
		}
	}
</script>

<style scoped>
	.ticket-content {
		width: 100%;
		overflow: hidden
	}

	.tab-content {
		min-height: 610rpx;
	}

	/*tabbar start*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tab-view {
		width: 100%;
		height: 88upx;
		overflow: hidden;
		background: #fff;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #efefef;
		box-sizing: border-box;
	}

	.tab-bar-item {
		height: 88upx;
		width: 123upx;
		line-height: 88upx;
		text-align: center;
		box-sizing: border-box;
		background-color: #ffffff;
		border-bottom: solid 6rpx transparent;
		box-sizing: border-box;
		color: #333333;
		font-size: 30rpx;
	}

	.tab-bar-item:nth-child(1) {
		margin-right: 252rpx;
	}

	.active {
		border: none;
		border-bottom: solid 8rpx #F34930;
		font-weight: bold;
	}

	/*tabbar end*/
	.scoll-y {
		height: 100%;
		/* padding: 0 24rpx; */
		box-sizing: border-box;
	}

	.activity-item:first-child {
		margin-top: 20rpx
	}

	.activity-item {
		padding: 20rpx;
		width: 700rpx;
		height: 140rpx;
		background: #fff;
		box-sizing: border-box;
		/* margin-bottom: 30rpx; */
		border-radius: 16rpx;
		display: flex;
		margin: 0 auto 20rpx;
	}

	.activity-item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		box-shadow: 0px 7rpx 12rpx 0px rgba(48, 128, 232, 0.3);
	}

	.activity-item .content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		justify-content: space-between;
	}

	.activity-item .content .bus_name {
		line-height: 35rpx;
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.activity-item .content .bus_time {
		color: #999;
		font-size: 26rpx;
		/* margin: 10rpx 0; */
		/* text-align: right; */
	}

	.activity-item .content .bus_Price {
		font-size: 32rpx;
		text-align: right;
		font-weight: bold;
	}

	.activity-item .content .bus_Price text {
		font-size: 24rpx;
	}

	.activity-item .content .bus_btn {
		display: flex;
		justify-content: flex-end;
	}

	.activity-item .content .bus_btn text {
		display: block;
		padding: 8rpx 20rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 24rpx;
	}

	.activity-item .content .bus_btn text:nth-child(2) {
		margin-left: 20rpx;
	}

	.activity-item .right {
		display: flex;
		align-items: center;
		line-height: 100rpx;
	}

	.time-filter {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		display: flex;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0 4rpx 6rpx 2rpx rgba(243, 73, 48, .2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 3;
	}

	.time-filter>view {
		display: flex;
		align-items: center;
	}

	.time-filter .tit {
		color: #333333;
		font-size: 28rpx;
		width: 180rpx;
		height: 88rpx;
	}

	.time-filter .right {
		height: 88rpx;
		flex: 1;
		justify-content: flex-end;
	}

	.slide-view {
		width: 702rpx;
		height: 0;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 9rpx 1rpx rgba(0, 19, 31, 0.2);
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -351rpx;
		z-index: 1;
		transition: all .1s;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.slide-view .info-item {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
	}

	.slide-view .info-item>text:nth-child(1) {
		color: #666666;
		font-size: 24rpx;
	}

	.slide-view .info-item>text:nth-child(2) {
		color: #333;
		font-size: 24rpx;
	}

	.slide-view .use-btn {
		lien-height: 88rpx;
		color: #666666;
		font-size: 26rpx;
		width: 100%;
		text-align: center;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slide-view .use-btn .down {
		transform: rotate(90deg);
		margin-left: 10rpx;
	}

	.slide-view .use-btn .up {
		transform: rotate(-90deg);
		margin-left: 10rpx;
	}
	
	.z_w{
		height: 88rpx;
		width: 100%;
		visibility: hidden;
	}
	
	.picker{
		font-size: 26rpx;
	}
</style>
